<template>
    <el-input
        v-model="modelValue"
        :rows="props.rows || 3"
        :placeholder="props.placeholder"
        :disabled="props.disabled || props.readonly"
        :autosize="{minRows: 2, maxRows: 4}"
        type="textarea"
        @input="onInput"
    />
</template>

<script setup lang="ts">
const modelValue = defineModel<string | null>();

const emits = defineEmits(['change', 'update:modelValue']);

const props = defineProps({
    placeholder: String,
    rows: Number,
    disabled: Boolean,
    readonly: Boolean
});

const onInput = (val: string) => {
    modelValue.value = val;
    emits('update:modelValue', val);
    emits('change', val);
};
</script>
